<template>
  <div class="number-select">
    <ab-options 
      :options="options" 
      :activeSwitchIndex="activeSwitchIndex"
      @click="updateIndex"
      @show-integrate="toggleIntegratePage"
      :showIntegrate="showIntegrate"
    ></ab-options>
    <play-instruction 
      :instruction="instruction"
      >
    </play-instruction>
    <div class="number-select-area" v-if="!showIntegrate">
      <div class="select-row" v-for="item in list" :key="item.key">
        <lottery-box
          class="select-box"
          ref="numberbox"
          v-for="(number, index) in item.numbers"
          :key="number.id"
          :content="number.number"
          :parameter="number.parameter[activeSwitchIndex].number"
          :class="addClass(number.selected, number.defaultClass)"
          @click.native="changeSelectionState(index, 0)">
        </lottery-box>
      </div>
    </div>
    <div class="tema-zhenghe" v-if="showIntegrate">
      <div class="number-select-area">
        <div class="select-row" v-for="(item, pIndex) in integrateList" :key="item.key">
          <lottery-box
            class="zhenghe-select-box"
            v-for="(number, index) in item.numbers"
            :key="number.id"
            :content="number.number"
            :parameter="number.parameter[activeSwitchIndex].number"
            :class="number.selected ? 'number-box-select-blue' : ''"
            @click.native="handleIntegrateSelect(index, pIndex)">
          </lottery-box>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PlayInstruction from '@/components/play-instruction/play-instruction'
import LotteryBox from '@/components/base/lottery-box/lottery-box'
import TailBox from '@/components/tail-box/tail-box'
import Switches from '@/components/base/switches/switches'
import FastchooseButton from '@/components/base/fastchoose-button/fastchoose-button'
import IntegrateButton from '@/components/base/integrate-button/integrate-button'
// import FastchooseButtons from '@/components/base/fastchoose-buttons/fastchoose-buttons'
import AbOptions from '@/components/ab-options/ab-options'
import { mapMutations } from 'vuex'
export default {
  components: {
    PlayInstruction,
    LotteryBox,
    TailBox,
    Switches,
    FastchooseButton,
    // FastchooseButtons,
    IntegrateButton,
    AbOptions
  },
  data() {
    return {
      instruction: '当期开出的最后一位号码为特码',
      list: [
        {
          numbers: [
            {
              id: 1,
              number: 1,
              selected: false,
              defaultClass: 'red',
              parameter: [
                {
                  type: 'a',
                  number: 9.75,
                  context: 'A面',
                },
                { type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ]
            },
            {
              id: 2,
              number: 2,
              selected: false,
              defaultClass: 'red',
              parameter: [
                {type: 'a',
                  number: 9.7,
                  context: 'A面'
                },
                {
                  type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ]
            },
            {
              id: 3,
              number: 3,
              selected: false,
              defaultClass: 'blue',
              parameter: [
                {type: 'a',
                  number: 9.7,
                  context: 'A面'
                },
                {
                  type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ]
            },
            {
              id: 4,
              number: 4,
              selected: false,
              defaultClass: 'blue',
              parameter: [
                {type: 'a',
                  number: 9.7,
                  context: 'A面'
                },
                {
                  type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ]
            },
            {
              id: 5,
              number: 5,
              selected: false,
              defaultClass: 'green',
              parameter: [
                {type: 'a',
                  number: 9.7,
                  context: 'A面'
                },
                {
                  type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ]
            },
            {
              id: 6,
              number: 6,
              selected: false,
              defaultClass: 'green',
              parameter: [
                {type: 'a',
                  number: 9.7,
                  context: 'A面'
                },
                {
                  type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ]
            },
            {
              id: 7,
              number: 7,
              selected: false,
              defaultClass: 'red',
              parameter: [
                {type: 'a',
                  number: 9.7,
                  context: 'A面'
                },
                {
                  type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ]
            },
            {
              id: 8,
              number: 8,
              selected: false,
              defaultClass: 'red',
              parameter: [
                {type: 'a',
                  number: 9.7,
                  context: 'A面'
                },
                {
                  type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ]
            },
            {
              id: 9,
              number: 9,
              selected: false,
              defaultClass: 'blue',
              parameter: [
                {type: 'a',
                  number: 9.7,
                  context: 'A面'
                },
                {
                  type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ]
            },
            {
              id: 10,
              number: 10,
              selected: false,
              defaultClass: 'blue',
              parameter: [
                {type: 'a',
                  number: 9.7,
                  context: 'A面'
                },
                {
                  type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ]
            },
            {
              id: 11,
              number: 11,
              selected: false,
              defaultClass: 'green' ,
              parameter: [
                {type: 'a',
                  number: 9.7,
                  context: 'A面'
                },
                {
                  type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ]
            },
            {
              id: 12,
              number: 12,
              selected: false,
              defaultClass: 'red',
              parameter: [
                {type: 'a',
                  number: 9.7,
                  context: 'A面'
                },
                {
                  type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ]
            },
            {
              id: 13,
              number: 13,
              selected: false,
              defaultClass: 'red',
              parameter: [
                {type: 'a',
                  number: 9.7,
                  context: 'A面'
                },
                {
                  type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ]
            },
            {
              id: 14,
              number: 14,
              selected: false,
              defaultClass: 'blue',
              parameter: [
                {type: 'a',
                  number: 9.7,
                  context: 'A面'
                },
                {
                  type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ]
            },
            {
              id: 15,
              number: 15,
              selected: false,
              defaultClass: 'blue',
              parameter: [
                {type: 'a',
                  number: 9.7,
                  context: 'A面'
                },
                {
                  type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ]
            },
            {
              id: 16,
              number: 16,
              selected: false,
              defaultClass: 'green',
              parameter: [
                {type: 'a',
                  number: 9.7,
                  context: 'A面'
                },
                {
                  type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ]
            },
            {
              id: 17,
              number: 17,
              selected: false,
              defaultClass: 'green',
              parameter: [
                {type: 'a',
                  number: 9.7,
                  context: 'A面'
                },
                {
                  type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ]
            },
            {
              id: 18,
              number: 18,
              selected: false,
              defaultClass: 'red',
              parameter: [
                {type: 'a',
                  number: 9.7,
                  context: 'A面'
                },
                {
                  type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ]
            },
            {
              id: 19,
              number: 19,
              selected: false,
              defaultClass: 'red',
              parameter: [
                {type: 'a',
                  number: 9.7,
                  context: 'A面'
                },
                {
                  type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ]
            },
            {
              id: 20,
              number: 20,
              selected: false,
              defaultClass: 'blue',
              parameter: [
                {type: 'a',
                  number: 9.7,
                  context: 'A面'
                },
                {
                  type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ]
            },
            {
              id: 21,
              number: 21,
              selected: false,
              defaultClass: 'green',
              parameter: [
                {type: 'a',
                  number: 9.7,
                  context: 'A面'
                },
                {
                  type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ]
            },
            {
              id: 22,
              number: 22,
              selected: false,
              defaultClass: 'green',
              parameter: [
                {type: 'a',
                  number: 9.7,
                  context: 'A面'
                },
                {
                  type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ]
            },
            {
              id: 23,
              number: 23,
              selected: false,
              defaultClass: 'red',
              parameter: [
                {type: 'a',
                  number: 9.7,
                  context: 'A面'
                },
                {
                  type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ]
            },
            {
              id: 24,
              number: 24,
              selected: false,
              defaultClass: 'red',
              parameter: [
                {type: 'a',
                  number: 9.7,
                  context: 'A面'
                },
                {
                  type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ]
            },
            {
              id: 25,
              number: 25,
              selected: false,
              defaultClass: 'blue',
              parameter: [
                {type: 'a',
                  number: 9.7,
                  context: 'A面'
                },
                {
                  type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ]
            },
            {
              id: 26,
              number: 26,
              selected: false,
              defaultClass: 'blue',
              parameter: [
                {type: 'a',
                  number: 9.7,
                  context: 'A面'
                },
                {
                  type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ]
            },
            {
              id: 27,
              number: 27,
              selected: false,
              defaultClass: 'green',
              parameter: [
                {type: 'a',
                  number: 9.7,
                  context: 'A面'
                },
                {
                  type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ]
            },
            {
              id: 28,
              number: 28,
              selected: false,
              defaultClass: 'green',
              parameter: [
                {type: 'a',
                  number: 9.7,
                  context: 'A面'
                },
                {
                  type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ]
            },
            {
              id: 29,
              number: 29,
              selected: false,
              defaultClass: 'red',
              parameter: [
                {type: 'a',
                  number: 9.7,
                  context: 'A面'
                },
                {
                  type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ]
            },
            {
              id: 30,
              number: 30,
              selected: false,
              defaultClass: 'red',
              parameter: [
                {type: 'a',
                  number: 9.7,
                  context: 'A面'
                },
                {
                  type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ]
            },
            {
              id: 31,
              number: 31,
              selected: false,
              defaultClass: 'blue',
              parameter: [
                {type: 'a',
                  number: 9.7,
                  context: 'A面'
                },
                {
                  type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ]
            },
             {
              id: 32,
              number: 32,
              selected: false,
              defaultClass: 'green',
              parameter: [
                {type: 'a',
                  number: 9.7,
                  context: 'A面'
                },
                {
                  type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ]
            },
            {
              id: 33,
              number: 33,
              selected: false,
              defaultClass: 'green',
              parameter: [
                {type: 'a',
                  number: 9.7,
                  context: 'A面'
                },
                {
                  type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ]
            },
            {
              id: 34,
              number: 34,
              selected: false,
              defaultClass: 'red',
              parameter: [
                {type: 'a',
                  number: 9.7,
                  context: 'A面'
                },
                {
                  type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ]
            },
            {
              id: 35,
              number: 35,
              selected: false,
              defaultClass: 'red',
              parameter: [
                {type: 'a',
                  number: 9.7,
                  context: 'A面'
                },
                {
                  type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ]
            },
            {
              id: 36,
              number: 36,
              selected: false,
              defaultClass: 'blue',
              parameter: [
                {type: 'a',
                  number: 9.7,
                  context: 'A面'
                },
                {
                  type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ]
            },
            {
              id: 37,
              number: 37,
              selected: false,
              defaultClass: 'blue',
              parameter: [
                {type: 'a',
                  number: 9.7,
                  context: 'A面'
                },
                {
                  type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ]
            },
            {
              id: 38,
              number: 38,
              selected: false,
              defaultClass: 'green',
              parameter: [
                {type: 'a',
                  number: 9.7,
                  context: 'A面'
                },
                {
                  type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ]
            },
            {
              id: 39,
              number: 39,
              selected: false,
              defaultClass: 'green',
              parameter: [
                {type: 'a',
                  number: 9.7,
                  context: 'A面'
                },
                {
                  type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ]
            },
            {
              id: 40,
              number: 40,
              selected: false,
              defaultClass: 'red',
              parameter: [
                {type: 'a',
                  number: 9.7,
                  context: 'A面'
                },
                {
                  type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ]
            },
            {
              id: 41,
              number: 41,
              selected: false,
              defaultClass: 'blue',
              parameter: [
                {type: 'a',
                  number: 9.7,
                  context: 'A面'
                },
                {
                  type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ]
            },
            {
              id: 42,
              number: 42,
              selected: false,
              defaultClass: 'blue',
              parameter: [
                {type: 'a',
                  number: 9.7,
                  context: 'A面'
                },
                {
                  type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ]
            },
            {
              id: 43,
              number: 43,
              selected: false,
              defaultClass: 'green',
              parameter: [
                {type: 'a',
                  number: 9.7,
                  context: 'A面'
                },
                {
                  type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ]
            },
            {
              id: 44,
              number: 44,
              selected: false,
              defaultClass: 'green',
              parameter: [
                {type: 'a',
                  number: 9.7,
                  context: 'A面'
                },
                {
                  type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ]
            },
            {
              id: 45,
              number: 45,
              selected: false,
              defaultClass: 'red',
              parameter: [
                {type: 'a',
                  number: 9.7,
                  context: 'A面'
                },
                {
                  type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ]
            },
            {
              id: 46,
              number: 46,
              selected: false,
              defaultClass: 'red',
              parameter: [
                {type: 'a',
                  number: 9.7,
                  context: 'A面'
                },
                {
                  type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ]
            },
            {
              id: 47,
              number: 47,
              selected: false,
              defaultClass: 'blue',
              parameter: [
                {type: 'a',
                  number: 9.7,
                  context: 'A面'
                },
                {
                  type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ]
            },
            {
              id: 48,
              number: 48,
              selected: false,
              defaultClass: 'blue',
              parameter: [
                {type: 'a',
                  number: 9.7,
                  context: 'A面'
                },
                {
                  type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ]
            },
            {
              id: 49,
              number: 49,
              selected: false,
              defaultClass: 'blue',
              parameter: [
                {type: 'a',
                  number: 9.7,
                  context: 'A面'
                },
                {
                  type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ]
            },
          ],
        },
      ],
      integrateList: [
        {
          id: 1,
          place: {
            context: '1',
            position: 0
          },
          numbers: [
            {
              id: 1,
              number: '特大',
              selected: false,
              parameter: [
                {
                  type: 'a',
                  number: 9.75,
                  context: 'A面',
                },
                { type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ]
            },
            {
              id: 2,
              number: '特小',
              parameter: [
                {
                  type: 'a',
                  number: 9.75,
                  context: 'A面',
                },
                { type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ],
              selected: false,
            },
            {
              id: 3,
              number: '特单',
              parameter: [
                {
                  type: 'a',
                  number: 9.75,
                  context: 'A面',
                },
                { type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ],
              selected: false,
            },
            {
              id: 4,
              number: '特双',
              parameter: [
                {
                  type: 'a',
                  number: 9.75,
                  context: 'A面',
                },
                { type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ],
              selected: false,
            },
            {
              id: 5,
              number: '特大单',
              parameter: [
                {
                  type: 'a',
                  number: 9.75,
                  context: 'A面',
                },
                { type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ],
              selected: false,
            },
            {
              id: 6,
              number:'特小单',
              parameter: [
                {
                  type: 'a',
                  number: 9.75,
                  context: 'A面',
                },
                { type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ],
              selected: false,
            },
            {
              id: 7,
              number: '特大双',
              parameter: [
                {
                  type: 'a',
                  number: 9.75,
                  context: 'A面',
                },
                { type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ],
              selected: false,
            },
            {
              id: 8,
              number: '特小双',
              parameter: [
                {
                  type: 'a',
                  number: 9.75,
                  context: 'A面',
                },
                { type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ],
              selected: false,
            },
          ]
        },
        {
          id: 2,
          place: {
            context: '',
            index: 1
          },
          numbers: [
            {
              id: 1,
              number: '合大',
              parameter: [
                {
                  type: 'a',
                  number: 9.75,
                  context: 'A面',
                },
                { type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ],
              selected: false,
            },
            {
              id: 2,
              number: '合小',
              parameter: [
                {
                  type: 'a',
                  number: 9.75,
                  context: 'A面',
                },
                { type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ],
              selected: false,
            },
            {
              id: 3,
              number: '合单',
              parameter: [
                {
                  type: 'a',
                  number: 9.75,
                  context: 'A面',
                },
                { type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ],
              selected: false,
            },
            {
              id: 4,
              number: '合双',
              parameter: [
                {
                  type: 'a',
                  number: 9.75,
                  context: 'A面',
                },
                { type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ],
              selected: false,
            },
            {
              id: 5,
              number: '尾大',
              parameter: [
                {
                  type: 'a',
                  number: 9.75,
                  context: 'A面',
                },
                { type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ],
              selected: false,
            },
            {
              id: 6,
              number:'尾小',
              parameter: [
                {
                  type: 'a',
                  number: 9.75,
                  context: 'A面',
                },
                { type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ],
              selected: false,
            },
          ],
        },
        {
          id: 3,
          place: {
            context: '',
            index: 2
          },
          numbers: [
            {
              id: 1,
              number: '金',
              parameter: [
                {
                  type: 'a',
                  number: 9.75,
                  context: 'A面',
                },
                { type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ],
              selected: false,
            },
            {
              id: 2,
              number: '木',
              parameter: [
                {
                  type: 'a',
                  number: 9.75,
                  context: 'A面',
                },
                { type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ],
              selected: false,
            },
            {
              id: 3,
              number: '水',
              parameter: [
                {
                  type: 'a',
                  number: 9.75,
                  context: 'A面',
                },
                { type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ],
              selected: false,
            },
            {
              id: 4,
              number: '火',
              parameter: [
                {
                  type: 'a',
                  number: 9.75,
                  context: 'A面',
                },
                { type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ],
              selected: false,
            },
            {
              id: 5,
              number: '土',
              parameter: [
                {
                  type: 'a',
                  number: 9.75,
                  context: 'A面',
                },
                { type: 'b',
                  number: 10,
                  context: 'B面'
                }
              ],
              selected: false,
            },
          ]
        },
      ],
      // 快速选号（整合/快捷选号）
      options: [
        {
         
          fastchoose: {
            context: '快速选择'
          }
        },
        {
         
          fastchoose: {
            context: '快速选择'
          }
        }
      ],
       // 快速选择
      showButtons: false,
      // 快速选择disabled
      fastchooseDisabled: false,
      // 整合disabled
      integrateDisabled: false,     
      // 默认a面
      activeSwitchIndex: 0,
      // 是否显示整合 
      showIntegrate: false
    }
  },
  methods: {
    // 改变球的选中状态/非整合
    changeSelectionState(sIndex, pIndex) {
      let numberObj = this.list[pIndex].numbers[sIndex]
      numberObj.selected = numberObj.selected ? false : true
      this.setBallState(this.list)
    },
    addClass(selected, className) {
      if (selected) {
        return `number-box-select-${className} ` + className
      } else {
        return className
      }
    },
    // ab面高亮
    updateIndex(index) {
      this.activeSwitchIndex = index
    },
    // 整合页面切换
    toggleIntegratePage(showIntegrate) {
      this.showIntegrate = showIntegrate
    },
    // 整合选择 
    handleIntegrateSelect(sIndex, pIndex) {
      let numberObj = this.integrateList[pIndex].numbers[sIndex]
      numberObj.selected = numberObj.selected ? false : true
      this.setBallState(this.integrateList)
    },
    ...mapMutations({
      setBallState: 'SET_BALL_SELECTION_STATE'
    })
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
  .select-box >>> .box-top  
    color #fff 
    line-height 20px
    border-radius 10px
    width 35px
  .red >>> .box-top 
    background $color-ball-red
  .blue >>> .box-top  
    background $color-ball-blue
  .green >>> .box-top  
    background $color-ball-green
  .number-select
    .number-select-area
      width 100%
      .select-row
        display flex
        width 100%
        box-sizing border-box
        flex-wrap wrap
        padding-left 10px
        .select-box
          width 86px
          height 48px
          margin-left 10px
          margin-top 10px
          margin-bottom 10px
          &.number-box-select-green
            border: 1px solid #429900;
            background: rgba(66, 153, 0, 0.102);
            box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1);
            box-sizing: border-box
          &.number-box-select-red
            border: 1px solid $color-ball-red;
            background: rgba($color-ball-red, 0.102);
            box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1);
            box-sizing: border-box
          &.number-box-select-blue
            border: 1px solid $color-ball-blue;
            background: rgba($color-ball-blue, 0.102);
            box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1);
            box-sizing: border-box
    .tema-zhenghe
      .number-select-area
        .select-row
          display flex
          width 100%
          box-sizing border-box
          flex-wrap wrap
          padding-left 10px
          .zhenghe-select-box
            width 110px
            height 48px
            margin-left 10px
            margin-top 10px
            margin-bottom 10px
            &.number-box-select-blue
              border: 1px solid $color-ball-blue;
              background: rgba($color-ball-blue, 0.102);
              box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1);
              box-sizing: border-box
</style>